<template>
  <nav class="navbar-com snavbar">
    <van-nav-bar :style="{ background: bg, color }" :border="false" left-arrow @click-left="$router.back()">
      <template #title>
        <slot name="title">{{ title }}</slot>
      </template>
      <template #right>
        <div class="right-item v-c">
          <slot></slot>
        </div>
      </template>
    </van-nav-bar>
  </nav>
</template>

<script>
export default {
  props: {
    title: {
      type: String
    },
    showHome: {
      type: Boolean,
      default: true
    },
    bg: {
      type: String,
      default: '#f16e44'
    },
    color: {
      type: String,
      default: '#fff'
    }
  }
}
</script>

<style>
.van-nav-bar {
  height: 50PX;
  /* background: #f16e44; */
}

.van-nav-bar .van-icon,
.van-nav-bar__title,
.van-nav-bar a {
  color: inherit;
}

.van-nav-bar a {
  font-size: 16PX;
}

.van-nav-bar__title {
  font-size: 18PX;
}

.van-nav-bar__left:active,
.van-nav-bar__right:active {
  opacity: 1;
}

.snavbar {
  z-index: 99999;
}

.snavbar .van-icon {
  font-size: 20PX;
}

.right-item>* {
  margin-left: 15px;
}
</style>